import React, {Suspense} from 'react'
import {ConfigProvider, Layout, Menu, Spin} from 'antd'
import {appTheme} from '@styles/theme'
import {useAppStore} from '@stores/appStore'
import {Navigate, Route, Routes} from 'react-router-dom'

const DataSourceManagement = React.lazy(() => import('@pages/DataSourceManagement'))

const { Header, Content, Sider } = Layout

export default function App() {
  const selectedPage = useAppStore((s) => s.selectedPage)
  const setSelectedPage = useAppStore((s) => s.setSelectedPage)
  return (
    <ConfigProvider theme={appTheme}>
      <Layout style={{ height: '100vh' }}>
        <Header style={{ color: '#fff', fontSize: 16, background: '#001529', display: 'flex', alignItems: 'center' }}>
          📊 Data Garden
        </Header>
        <Layout>
          <Sider width={220} theme="dark" style={{ background: '#001529' }}>
            <Menu
              theme="dark"
              mode="inline"
              selectedKeys={[selectedPage]}
              onClick={({ key }) => setSelectedPage(key as any)}
              items={[{ key: 'dataSourceCenter', label: '数据源管理' }]}
            />
          </Sider>
          <Content style={{ height: 'calc(100vh - 64px)' }}>
            <Suspense
              fallback={
                <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
                  <Spin />
                </div>
              }
            >
              <Routes>
                <Route path="/" element={<Navigate to="/data-source" replace />} />
                <Route path="/data-source" element={<DataSourceManagement />} />
              </Routes>
            </Suspense>
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  )
}